<template>
    <div class="screen screen2">
        <div class="sc2title">
            <span></span>
            <div class="row1">技能队列</div>
            <div class="row2">呼入/在线数量</div>
            <div class="row3">接通数</div>
            <div class="row4">接通率</div>
            <div class="row5">平均服务时长</div>
            <div class="row6">平均等待时长</div>
            <div class="row7">当前排队数</div>
            <div class="row8">客服龙虎榜</div>
        </div>
        <div class="col" v-for="(item,index) in list" :key="index" :class="{light1:(index%2===0),light2:(index%2===1)}">
            <div class="row1"><span class="rowcon" :title="item['SKILL_GRP_NAME']">{{item['SKILL_GRP_NAME']}}</span></div>
            <div class="row2"><span class="rowcon">{{item['IDX_03_04_001']}}</span></div>
            <div class="row3"><span class="rowcon">{{item['IDX_03_04_002']}}</span></div>
            <div class="row4"><progressbar :val="item['IDX_03_05_001']"></progressbar><span class="row4con">{{item['IDX_03_05_001']}}</span></div>
            <div class="row5"><span class="rowcon">{{item['IDX_03_06_005']}}</span></div>
            <div class="row6"><span class="rowcon">{{item['IDX_03_06_006']}}</span></div>
            <div class="row7"><span class="rowcon">{{item['IDX_03_01_002']}}</span></div>
            <div class="row8">
                <span class="spacespan"></span>
                <div><span>{{item['GRP_NAME']}}</span></div>
                <div><span>{{item['USER_NAME']}}</span></div>
                <div><span>{{item['CALL_CNT']}}</span></div>
                <div><span>{{item['ORDER_NUM']}}</span></div>
            </div>
        </div>
        <div class="sc2foot">
            <div class="row1">合计</div>
            <div class="row2">{{total['IDX_01_02_001']}}</div>
            <div class="row3">{{total['IDX_01_02_002']}}</div>
            <div class="row4"><progressbar :val="total['IDX_01_02_003']"></progressbar><span class="row4con">{{total['IDX_01_02_003']}}</span></div>
            <div class="row5">{{total['IDX_01_02_012']}}</div>
            <div class="row6">{{total['IDX_01_02_013']}}</div>
            <div class="row7">{{total['IDX_03_01_002']}}</div>
            <div class="row8"></div>
        </div>
    </div>
</template>

<script>
    //查询技能队列xml skillGrp_Manage
    import api from '../api'
    import progressbar from './screen2parts/progressbar'
    export default {
        name: "screen2",
        components:{
            progressbar
        },
        data(){
            return {
                list:[],
                allSkills:[],
                showQua:19, //每次展示的技能队列数量
                pages:1,    //总共多少页
                nowPage:1,   //当前展示第几页技能队列
                total:{
                    'IDX_01_02_001':0,
                    'IDX_01_02_002':0,
                    'IDX_01_02_003':0,
                    'IDX_01_02_012':0,
                    'IDX_01_02_013':0,
                    'IDX_03_01_002':0
                }
            }
        },
        async created(){
            this.allSkills = await api.getAllSkills();
            this.pages = Math.ceil(this.allSkills.length/this.showQua);

        },
        methods:{
            //刷新当前屏幕
            async refreshThisSc(){
                let nowSkills = this.getNowSkills();
                let skills = [];
                nowSkills.forEach((item)=>{
                    skills.push(item['SKILL_GRP_ID'])
                })
                let allskills = this.allSkills.map((item)=>{
                    return item['SKILL_GRP_ID'];
                })
                let allLineUp = await api.getRealtimeSkillInfo(allskills);
                let total = await api.getHistoryByVnd()
                let skillInfo = await api.getHistorySkillInfo(skills)
                let realtimeLineUp = await api.getRealtimeSkillInfo(skills);
                let rankingInfo = await api.getRanking(this.showQua-1)
                allLineUp.forEach((item)=>{
                    this.total['IDX_03_01_002'] += parseInt(item['idxs'][0]['val'])
                })
                this.total['IDX_01_02_001'] = total[0]['idxs'][0]['val']
                this.total['IDX_01_02_002'] = total[0]['idxs'][1]['val']
                this.total['IDX_01_02_003'] = (total[0]['idxs'][2]['val']||0)+'%'
                this.total['IDX_01_02_012'] = total[0]['idxs'][3]['val']
                this.total['IDX_01_02_013'] = total[0]['idxs'][4]['val']
                this.list = [];

                for(let i=0; i<rankingInfo.length+1; i++){
                    var listItem = {};
                    if(i==0){
                        if(skillInfo[i]){
                            listItem['SKILL_GRP_NAME'] = nowSkills[i]['SKILL_GRP_NAME'];
                            listItem['IDX_03_04_001'] = skillInfo[i]['idxs'][0]['val'];  //请求人工数（呼入/在线数量）
                            listItem['IDX_03_04_002'] = skillInfo[i]['idxs'][1]['val'];  //通话量（接通数）
                            listItem['IDX_03_05_001'] = (skillInfo[i]['idxs'][2]['val']||0)+'%';  //通话率（接通率）
                            listItem['IDX_03_06_005'] = skillInfo[i]['idxs'][3]['val'];  //通话均长（平均服务时长）
                            listItem['IDX_03_06_006'] = skillInfo[i]['idxs'][4]['val'];  //等待均长（平均等待时长）
                            listItem['IDX_03_01_002'] = realtimeLineUp[i]['idxs'][0]['val'];  //排队数
                            listItem['GRP_NAME'] = '班别';  //班组名称
                            listItem['USER_NAME'] = '姓名';  //姓名
                            listItem['CALL_CNT'] = '接听量';  //接听量
                            listItem['ORDER_NUM'] = '排名';  //排名
                        }else {
                            listItem['GRP_NAME'] = '班别';  //班组名称
                            listItem['USER_NAME'] = '姓名';  //姓名
                            listItem['CALL_CNT'] = '接听量';  //接听量
                            listItem['ORDER_NUM'] = '排名';  //排名
                        }
                    }else {
                        if(skillInfo[i]){
                            listItem['SKILL_GRP_NAME'] = nowSkills[i]['SKILL_GRP_NAME'];
                            listItem['IDX_03_04_001'] = skillInfo[i]['idxs'][0]['val'];  //请求人工数（呼入/在线数量）
                            listItem['IDX_03_04_002'] = skillInfo[i]['idxs'][1]['val'];  //通话量（接通数）
                            listItem['IDX_03_05_001'] = (skillInfo[i]['idxs'][2]['val']||0)+'%';  //通话率（接通率）
                            listItem['IDX_03_06_005'] = skillInfo[i]['idxs'][3]['val'];  //通话均长（平均服务时长）
                            listItem['IDX_03_06_006'] = skillInfo[i]['idxs'][4]['val'];  //等待均长（平均等待时长）
                            listItem['IDX_03_01_002'] = realtimeLineUp[i]['idxs'][0]['val'];  //排队数
                            listItem['GRP_NAME'] = rankingInfo[i-1]['GRP_NAME'];  //班组名称
                            listItem['USER_NAME'] = rankingInfo[i-1]['USER_NAME'];  //姓名
                            listItem['CALL_CNT'] = rankingInfo[i-1]['CALL_CNT'];  //接听量
                            listItem['ORDER_NUM'] = rankingInfo[i-1]['ORDER_NUM'];  //排名
                        }else {
                            listItem['GRP_NAME'] = rankingInfo[i-1]['GRP_NAME'];  //班组名称
                            listItem['USER_NAME'] = rankingInfo[i-1]['USER_NAME'];  //姓名
                            listItem['CALL_CNT'] = rankingInfo[i-1]['CALL_CNT'];  //接听量
                            listItem['ORDER_NUM'] = rankingInfo[i-1]['ORDER_NUM'];  //排名
                        }
                    }
                    this.list.push(listItem);
                }
                if(rankingInfo.length+1<this.showQua){
                    for(let j=0; j<this.showQua-rankingInfo.length-1; j++){
                        this.list.push({});
                    }
                }

                this.nowPage ++;
                if(this.nowPage > this.pages){
                    this.nowPage = 1;
                }


            },
            //从所有技能中取出当前页的技能
            getNowSkills(){
                let rel = [];
                this.allSkills.forEach((item,index)=>{
                    if(index>=(this.nowPage-1)*this.showQua && index<this.nowPage*this.showQua){
                        rel.push(item)
                    }
                })
                return rel;
            }
        },
        watch:{
            allSkills(){
                this.refreshThisSc();
            }
        }
    }
</script>

<style lang="less" scoped>
    .screen2{
        @outborder: 1px solid #2047a0;
        border: @outborder;
        flex-direction: column;
        .sc2title{
            height:52px;
            padding-top: 8px;
            width: 100%;
            background: url('./images/sc2bg.png') repeat-x;
            border-bottom: @outborder;
            display: flex;
            align-items: center;
            &>span{
                position: absolute;
                width: 232px;
                height: 13px;
                background: url("images/screen2bg.png") no-repeat;
                top: -1px;
                left: 12%;
            }
            &>div{
                width: 0;
                box-sizing: border-box;
                text-align: center;
                color: #42edf8;
                font-size: 20px;
            }
            &>.row8{
                font-size: 24px;
            }
        }
        .light1{background-color: rgba(184,211,254,0.05);}
        .light2{background-color: rgba(184,211,254,0.1);}
        .col{
            display: flex;
            width: 100%;
            flex-grow: 1;
            height: 0;
            align-items: center;
            color: #fff;
            @rowborder:1px solid #0b1632;


            &>div{
                width: 0;
                height: 100%;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                font-size: 18px;
                border-right:@rowborder;
                border-bottom:@rowborder;
                &:nth-last-child(1){border-right:none;}
                &:nth-last-child(1){border-bottom:none;}
                &>.rowcon{width: 100%; text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


                &.row8{
                    .spacespan{
                        border-right: @rowborder;
                        width: 30px;
                        height: 100%;
                    }
                    &>div{
                        width: 0;
                        height: 100%;
                        flex-grow: 1;
                        display: flex;
                        align-items: center;
                        border-bottom: @rowborder;
                        span{
                            width: 100%;
                            text-align: center;
                        }
                    }
                }
            }
            &:nth-last-child(1){
                &>div{border-bottom:none;}
                /*&>div{&:nth-last-child{border-bottom:none;}}*/
            }
        }
        .sc2foot{
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 18px;
            height: 34px;
            &>div{
                width: 0;
                box-sizing: border-box;
                text-align: center;
            }
        }

        .row1{flex-grow: 1.2;}
        .row2{flex-grow: 1;}
        .row3{flex-grow: 0.8;}
        .row4{flex-grow: 1.5; display: flex; align-items: center; justify-content: space-around}
        .row5{flex-grow: 1;}
        .row6{flex-grow: 1;}
        .row7{flex-grow: 1;}
        .row8{flex-grow: 3; font-size: 24px}

        .row4con{
            width: 30%;
        }
    }
</style>
